<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody" class="grace-body">
			<!-- 未登录 -->
			<template v-if="!isLogin">
				<text class="grace-flex-center grace-h5" style="padding: 20rpx 0;">登录糗事百科，体验更多功能</text>
				<third-login></third-login>
				<!-- 账号密码登录 -->
				<view class="grace-flex-center grace-flex-vcenter grace-margin-top" style="margin-bottom: 20rpx;" @click="gotoLogin">
					<text class="grace-h5">账号密码登录</text>
					<text class="iconfont icon-jinru grace-gray"></text>
				</view>
			</template>
			<!-- 登录 -->
			<template v-else>
				<view class="user-info grace-flex grace-flex-vcenter" @click="gotoUserSpace">
					<image src="../../static/demo/userpic/6.jpg" mode="widthFix" lazy-load></image>
					<view class="grace-flex1">
						<view class="name">涛哥哥</view>
						<view class="grace-black9">总访客 0 今日 0</view>
					</view>
					<text class="iconfont icon-jinru"></text>
				</view>
			</template>
		
			<!-- 横向数据 -->
			<graceBoxBanner :fontSize="['40rpx', '24rpx', '30rpx']" :items="items" style="padding: 20rpx 10rpx;"></graceBoxBanner>
			<!-- 广告位 -->
			<view class="grace-flex-center grace-flex-vcenter"><image class="my-ad" src="../../static/demo/demo20.jpg" mode="widthFix"></image></view>
			<!-- 功能列表 -->
			<view class="grace-flex grace-columns grace-margin-top">
				<common-item title="浏览历史" icon="liulan" color="#61CBEF"></common-item>
				<common-item title="糗事百科认证" icon="huiyuanvip" color="#FFCC00"></common-item>
				<common-item v-if="isLogin" title="审核糗事" icon="keyboard" color="#61CBEF"></common-item>
			</view>
		</view>
	</gracePage>
</template>
<script>
var graceJS = require('@/Grace.JS/grace.js');
export default {
	data() {
		return {
			isLogin: true,
			items: [[0, '', '糗事'], [0, '', '动态'], [0, '', '评论'], [0, '', '收藏']]
		};
	},
	onNavigationBarButtonTap(e) {
		if (e.index == 0) {
			graceJS.navigate('../setting/setting');
		}
	},
	methods: {
		gotoLogin(){
			graceJS.navigate('../login/login');
		},
		gotoUserSpace(){
			graceJS.navigate('../user-space/user-space');
		}
	}
};
</script>
<style lang="stylus">
.my-ad
	border-radius 20rpx
	width 100%
	height 0
.user-info
	padding 20rpx
	image
		width 120rpx
		height 120rpx
		border-radius 100%
		flex-shrink 0
		margin-right 20rpx
	.name
		font-size 36rpx
		margin-bottom 10rpx
</style>
